<template>
  <div class="c-bg-white">
    <new-search-bar searchFixed="true" bgSearch="c-bg-white c-pv24-i" placeholder="请输入关键字" :searchText="name" @search="startSearch" @cancel="startSearch"></new-search-bar>
    <article class="c-pt20 c-ph24">
      <section v-for="item in list" :key="item.prodId" class="c-flex-row c-pb48">
        <div class="c-ww180 c-hh120 c-p" @click="tapGoProdDetail(item)">
          <CoverImg :prodType="item.prodType" coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.poster)" />
          <div class="c-br8 c-hh28 c-lh30 c-ph6 c-textAlign-c c-translucent-balck60 c-fs18 c-fc-white c-pa c-p-b8 c-p-r8 c-pz9">活动</div>
        </div>
        <div class="c-pl20 c-flex-grow1 c-w0 c-flex-column c-justify-sb">
          <div class="c-fs24 c-fw-b c-text-ellipsis2">{{item.name}}</div>
          <div class="c-flex-row c-aligni-end">
            <div class="c-fc-xmlred c-flex-row c-aligni-center c-lh26 c-hh26 c-fw-b">
              <span v-if="item.priceInfo.beforeSymbol" class="c-fs20">{{item.priceInfo.beforeSymbol}}</span>
              <span class="c-lh26 c-hh26" :class="item.priceInfo.isText == 1 ? 'c-fs24':'c-fs26'">{{item.priceInfo.price}}</span>
              <span v-if="item.priceInfo.afterSymbol" class="c-fs18">{{item.priceInfo.afterSymbol}}</span>
            </div>
            <div @click.stop="tapGoDetail(item)" class="c-ml-auto c-ww174 c-hh44 theme-bg c-fc-white c-fs22 c-flex-row c-flex-center c-br22">查看推广数据</div>
          </div>
        </div>
      </section>
      <loading-status-tem :dataStatus="loadingStatus"></loading-status-tem>
    </article>

  </div>
</template>

<script>
import newSearchBar from '@/components/templates/common/newSearchBar.vue';
import loadingStatusTem from '@/components/templates/common/loadingStatusTem.vue';
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from '@/utils/common.js';
import { LOAD_STATUS_ENUM } from '@/utils/constant.js';
const LIMIT = 20;
export default {
  name: 'shopAnalysisList',
  components: {
    newSearchBar,
    loadingStatusTem,
    CoverImg
  },
  props: [],
  data() {
    return {
      loadingStatus: ' NO_MORE_DATA', //显示加载更多LOAD_MORE 加载中 LOADING 没有更多 NO_MORE_DATA
      list: [], // 活动数据
      name: '' // 搜索的内容
    };
  },
  created() {
    utilJs.appShare(this);
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const NO_INIT_PAGE_PATH = ['/homePage/agent/shopAnalysisDetail', '/activity/activityDetail'];
      if (!NO_INIT_PAGE_PATH.includes(from.path) || !vm.list.length) {
        vm.initData();
      } else {
        vm.$store.commit('updateLoadingStatus', {
          isLoading: false
        });
      }
    })
  },
  methods: {
    tapGoProdDetail(item) {
      this.$routerGo(this, "push", { path: `/activity/activityDetail?ActivityNo=${item.prodId}&from=activity` });
    },
    tapGoDetail(item) {
      this.$routerGo(this, "push", { path: `/homePage/agent/shopAnalysisDetail?prodId=${item.prodId}&prodType=${item.prodType}` });
    },
     checkPrice(price) { // 1免费 2付费且单价格（不是价格区间，不是￥1.00起这种） 3付费且多价格（有价格区间，￥1.00起这种）
      const startPrice = price.split('~')[0]
      const endPrice = price.split('~')[1]
      if (startPrice == endPrice && (Number(startPrice) == 0) && (Number(endPrice) == 0)) { // 免费
        return 1
      }
      if (Number(startPrice) != 0 && startPrice == endPrice) { // 付费且单价格
        return 2
      }
      if ((Number(startPrice) != 0 || Number(endPrice) != 0) && startPrice != endPrice) { // 付费且多价格
        return 3
      }
    },
    startSearch(e) {
      this.page = 1;
      this.name = e.searchValue;
      this.getList();
    },
    getList() {
      this.loadingStatus = LOAD_STATUS_ENUM.LOADING;
      utilJs.getMethod(
        `${global.apiurl}Analyse/prod/list?search=${this.name}&page=${this.page}&limit=${LIMIT}&encodeUserId=${localStorage.getItem('userId')}`,
        res => {
          let resList = res.data || [];
          for (let item of resList) {
            item.priceInfo = utilJs.formatActivityPrice({price:item.price, payType:item.payType, showType:2});
          }
          const { list, loadStatus, page } = utilJs.formatListData(this.page, LIMIT, resList, this.list);
          this.list = list;
          this.loadingStatus = loadStatus;
          this.page = page;
        },
        failRes => {
          this.loadingStatus = LOAD_STATUS_ENUM.DATA_ERROR;
        }
      );
    },
    //分享
    wechatShare: function() {
      utilJs.wechatConfig('', '', '', '', function() {});
    },
    //手机端分享
    appShare: function() {
      utilJs.appShareTrue('', '', '', '');
    },
    windowScrollFunction: function() {
      utilJs.handleLoading(() => {
        if (this.loadingStatus == LOAD_STATUS_ENUM.HAS_MORE_DATA && this.list.length) {
          this.getList();
        }
      });
    },
    initData() {
      this.page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.list = [];
      this.name = '';
      this.getList();
    }
  },
  activated() {
    setDocumentTitle('销售线索');
    window.addEventListener('scroll', this.windowScrollFunction);
    this.wechatShare();
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>
